<template>
  <div>
    <!-- 自定义弹窗（核心） -->
    <el-dialog
      title="验证下载密码"
      :v-model="true"
      :visible="true"
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <!-- 密码输入框 -->
      <el-input
        v-model="tempPassword"
        type="password"
        placeholder="请输入4-16位密码"
        style="margin-bottom: 20px"
      />

      <!-- 自定义按钮组 -->
      <div style="text-align: right">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="loading"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { AjaxCommon } from "@/libs/apiCommon";
export default {
  data() {
    return {
      loading: false,
      tempPassword: "", // 密码输入值
      // 密码验证正则（4-16位字母/数字/常见特殊字符）
      passwordReg: /^[a-zA-Z0-9]{4,16}$/,
    };
  },
  methods: {
    // 取消按钮逻辑
    handleCancel() {
      this.tempPassword = ""; // 清空密码
      this.$emit("close", "");
    },

    // 确定按钮逻辑（核心验证）
    async handleConfirm() {
      this.loading = true;
      // 1. 空值校验
      if (!this.tempPassword) {
        this.$message.error("请输入密码！");
        this.loading = false;
        return;
      }

      // 2. 规则校验
      if (!this.passwordReg.test(this.tempPassword)) {
        this.$message.error("密码格式错误！需4-16位，仅支持字母、数字");
        this.loading = false;
        return;
      }

      // 3. 验证通过（仅执行业务逻辑，不关闭弹窗）
      const res = await AjaxCommon(
        "/api/Role/DownloadPasswordGet?password=" + this.tempPassword,
        "get",
        null
      );
      console.log(res, "res...............");
      if (!res.data.success) {
        this.$message.error("密码错误");
        this.loading = false;
      } else {
        this.$emit("success", "");
      }
    },
  },
};
</script>